<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>商品详情</title>
    <link rel="stylesheet" href="./css/public.css">
    <link rel="stylesheet" href="./css/list.min.css">
    <link rel="stylesheet" href="./fonticon/iconfont.css">

    <link rel="stylesheet" href="./plug/放大镜/css/normalize.css">
    <link rel="stylesheet" href="./plug/放大镜/src/jquery.exzoom.css">

    <script src="./js/jquery-3.6.0.js"></script>
    <!-- <script src="./js/list.js"></script> -->

    <style>
        #exzoom {
            width: 400px;
            /*height: 400px;*/
            /* margin: 20px auto; */
            margin-right: 20px;
        }
    </style>
</head>

<body>
    <!-- 头部开始 -->
    <header>
        <div class="nav">
            <!-- 顶部导航开始 -->
            <div class="h-nav main">
                <!-- 左边导航开始 -->
                <ul class="left-link">
                    <li>欢迎来到聚美!</li>
                    <li><a href="./login.html">请登录</a></li>
                    <li><a href="./regist.html">快速注册</a></li>
                </ul>
                <!-- 左边导航结束 -->
                <!-- 右边导航开始 -->
                <ul class="right-link">
                    <li><a href="#">订单查询</a></li>
                    <li><a href="#"><i class="iconfont">&#xe675;</i>收藏的品牌</a></li>
                    <li class="myli" id="myli"><a href="#">我的聚美</a>|
                        <ul class="mylist">
                            <li><a href="#">我的订单</a></li>
                            <li><a href="#">我的现金券</a></li>
                            <li><a href="#">我的红包</a></li>
                            <li><a href="#">我的余额</a></li>
                            <li><a href="#">我的订单</a></li>
                            <li><a href="#">我的订单</a></li>
                            <li><a href="#">我的订单</a></li>
                            <li><a href="#">我的订单</a></li>
                            <li><a href="#">我的订单</a></li>
                        </ul>
                    </li>
                    <li class="sji"><a href="#"><i class="iconfont">&#xe602;</i>手机聚美</a>|</li>
                    <li class="more" id="more"><a href="#">更多</a>
                        <ul class="mymore">
                            <li><a href="#">我的订单</a></li>
                            <li><a href="#">我的现金券</a></li>
                            <li><a href="#">我的红包</a></li>
                            <li><a href="#">我的余额</a></li>
                            <li><a href="#">我的订单</a></li>
                            <li><a href="#">我的订单</a></li>
                            <li><a href="#">我的订单</a></li>
                            <li><a href="#">我的订单</a></li>
                            <li><a href="#">我的订单</a></li>
                        </ul>
                    </li>
                </ul>
                <!-- 右边导航结束 -->
            </div>
            <!-- 顶部导航结束 -->
        </div>
        <div class="searchBox main">
            <!-- logo -->
            <div class="logo">
                <img src="./images/index/logo.jpg" alt="">
            </div>

            <!-- 购物车按钮 -->
            <div class="cartBox">
                <img src="./images/index/cart.gif" alt="">
                <a href="">去购物车结算</a>
            </div>
        </div>
    </header>

    <!-- 内容开始 -->
    <section>
        <div class="content1">
            <div class="s-nav main">
                <ul class="sl-link">
                    <li><a href="./index.html">首页</a></li>
                    <li><a href="#">极速免税店</a></li>
                    <li><a href="#">母婴特卖</a></li>
                    <li><a href="#">美妆商城</a></li>
                    <li><a href="#">国际轻奢</a></li>
                    <li><a href="#">品牌专场</a></li>
                </ul>

                <ul class="sr-link">
                    <li><a href="javascrpit:void(0)"><img src="./images/index/icon1.jpg" alt=""></a></li>
                    <li><a href=""><img src="./images/index/icon2.jpg" alt=""></a></li>
                </ul>
            </div>
        </div>
        <!--content2开始  -->
        <div class="content2 main">
            <div class="c2-link">
                <ul>
                    <li><a href="">聚美优品首页</a>&gt;</li>
                    <li><a href="">名品特卖</a>&gt;</li>
                    <li><a href=""> WIS水活多效爽肤水化妆水男士补水保湿清爽控油收毛孔</a></li>
                </ul>
            </div>
            <!-- 放大镜与详情部分 -->
            <div class="imgtxtBox">
                <!-- 放大镜开始 -->
                <div class="exzoom" id="exzoom">
                    <!--大图区域-->
                    <div class="exzoom_img_box">
                        <ul class='exzoom_img_ul'>
                            <li><img src="./images/list/img1.jpg" /></li>

                        </ul>
                    </div>
                    <!--缩略图导航-->
                    <div class="exzoom_nav">
                        <ul class='exzoom_img_ul'>
                            <li><img src="./images/list/img1.jpg" /></li>
                        </ul>
                    </div>
                    <!--控制按钮-->
                    <p class="exzoom_btn">
                        <a href="javascript:void(0);" class="exzoom_prev_btn"> &lt; </a>
                        <a href="javascript:void(0);" class="exzoom_next_btn"> &gt; </a>
                    </p>
                </div>
                <!-- 放大镜结束 -->
                <!-- 右边详情与加入购物车部分 -->
                <div class="infoCar">
                    <h3>
                        自信男神的秘密！WIS水活多效爽肤水(男士)120ml为你赶走肌肤烦恼。
                        加入积雪草、北美金缕梅、光果甘草、虎杖根，
                        补水保湿的同时二次清洁面部肌肤的残留污垢，
                        细滑面部肌肤，改善肤质，还你一个爽朗自信的面子。
                    </h3>
                    <p>&yen;195</p>
                    <div class="date">
                        <div></div>
                        <span>
                            00天01小时09分55秒
                        </span>
                    </div>
                    <div class="yunfei">
                        <span>运费</span>
                        <div>新人包邮</div>
                    </div>
                    <div class="fuwu">
                        <span>服务</span>
                        <ul>
                            <li><a href="">质量保险</a>|</li>
                            <li><a href="">本商品支持7天无条件退货(拆封后不支持)</a>|</li>
                            <li><a href="">本商品不支持换货</a>|</li>
                            <li><a href="">闪电发货</a></li>
                        </ul>
                    </div>
                    <div class="tishi">
                        国家药监局提示：化妆品不能宣称医疗作用，也没有治疗作用，宣称
                        治疗儿童湿疹等皮肤病的产品不属于化妆品。
                    </div>
                    <div class="xinhao">
                        <span>型号</span>
                        <div>120ml</div>
                    </div>
                    <div class="number">
                        <span>数量</span>
                        <div class="btn">
                            <span>1</span>
                            <div>
                                <a href="javascrpit:void(0)">+</a>
                                <a href="javascrpit:void(0)">-</a>
                            </div>
                        </div>
                    </div>
                    <button>加入购物车</button>
                    <div class="buy">
                        <div></div>
                        <span>99人已购买</span>
                    </div>
                    <div class="txt">
                        本商品非自营，由<span>该商品由温碧泉旗舰店负责发货并提供后续售后
                            服务(营业执照)</span>直接发货并提供售后服务,您在购买过程中有任何
                        疑问可咨询聚美客服。
                    </div>
                </div>
                <!-- 右边详情与加入购物车部分结束  -->
            </div>
            <!-- 放大镜与详情部分结束 -->
        </div>
        <!--content2结束  -->
        <div class="content3 main">
            <div class="c3-nav">
                <ul>
                    <li><a href="javascript:void(0)">商品参数</a>|</li>
                    <li><a href="javascript:void(0)">商品详情</a>|</li>
                    <li><a href="javascript:void(0)">为你推荐</a>|</li>
                    <li><a href="javascript:void(0)">收货评价</a>|</li>
                    <li><a href="javascript:void(0)">商品咨询</a></li>
                </ul>
                <ol class="main">
                    <li class="selected "><img src="./images/list/tab1.png" alt=""></li>
                    <li class="">
                        <img src="./images/list/xq (1).jpg" alt="">
                        <img src="./images/list/xq (2).jpg" alt="">
                        <img src="./images/list/xq (3).jpg" alt="">
                        <img src="./images/list/xq (4).jpg" alt="">
                        <img src="./images/list/xq (5).jpg" alt="">
                        <img src="./images/list/xq (6).jpg" alt="">
                        <img src="./images/list/xq (7).jpg" alt="">
                        <img src="./images/list/xq (9).jpg" alt="">
                        <img src="./images/list/xq (8).jpg" alt="">
                    </li>
                    <li>
                        <img src="./images/list/为你推荐.jpg" alt="">
                        <div class="tuijian">
                            <p>买了此类商品的客户还买了</p>
                            <div>暂时没有数据</div>
                        </div>
                    </li>
                    <li class="">
                        <img src="./images/list/收货评价.jpg" alt="">
                        <div class="pj">
                            <div>
                                <span>全部评价</span>
                                <input type="radio" checked="checked" name="pj" />
                            </div>
                            <div>
                                <span>好评</span>
                                <input type="radio" name="pj" />
                            </div>
                            <div>
                                <span>中评</span>
                                <input type="radio" name="pj" />
                            </div>
                            <div>
                                <span>差评</span>
                                <input type="radio" name="pj" />
                            </div>
                        </div>
                    </li>
                    <li>
                        <img src="./images/list/商品咨询.jpg" alt="">
                        <ul>
                            <li><a href=""><img src="./images/list/l1.jpg" alt=""></a></li>
                            <li><a href=""><img src="./images/list/l2.jpg" alt=""></a></li>
                            <li><a href=""><img src="./images/list/l3.jpg" alt=""></a></li>
                        </ul>
                    </li>
                </ol>
            </div>
        </div>
    </section>
    <!-- 内容结束 -->

    <!-- 底部开始 -->

    <!-- 底部结束 -->
    <script src="./plug/放大镜/js/jquery-1.11.0.min.js" type="text/javascript"></script>
    <script src="./plug/放大镜/src/jquery.exzoom.js"></script>
    <script>
        $(window).on("load", function () {

            (function () {
                $.fn.extend({
                    // _magnifier() {
                    //     /*
                    //      *  公式:  小图/大图=小区域/大区域
                    //      *   只能修改小区域
                    //      *   小区域=(小图/大图)*大区域
                    //      *  比例=大区域/小区域
                    //      * */
                    //     $(window).on("load", function () {
                    //         // 设置小区域的大小
                    //         // $("#middleImg").css({
                    //         //     height: $("#middleImg").find("img").height() / $("#bigArea").find("img").height() * $("#bigArea").height(),
                    //         //     width: $("#middleImg").find("img").width() / $("#bigArea").find("img").width() * $("#bigArea").width(),
                    //         // })
                    //         //计算比列
                    //         let oScoreX = $("#bigArea").width() / $("#middleArea").width();
                    //         let oScoreY = $("#bigArea").height() / $("#middleArea").height();
                    //         //进入小图,小区域和大区域要显示
                    //         $("#middleImg").on("mouseenter", function () {
                    //             $("#middleArea").show();
                    //             $("#bigArea").show();
                    //         }).on("mouseleave", function () {
                    //             $("#middleArea").hide();
                    //             $("#bigArea").hide();
                    //         })
                    //         //在小图里移动
                    //         $("#middleImg").on("mousemove", function (e) {
                    //             let mX = e.pageX - $(this).offset().left - $("#middleArea").width() / 2;
                    //             let mY = e.pageY - $(this).offset().top - $("#middleArea").height() / 2;
                    //             if (mX <= 0) {
                    //                 mX = 0;
                    //             }
                    //             if (mY <= 0) {
                    //                 mY = 0
                    //             }
                    //             if (mX >= $("#middleImg").width() - $("#middleArea").width()) {
                    //                 mX = $("#middleImg").width() - $("#middleArea").width()
                    //             }
                    //             if (mY >= $("#middleImg").height() - $("#middleArea").height()) {
                    //                 mY = $("#middleImg").height() - $("#middleArea").height()
                    //             }
                    //             $("#middleArea").css({
                    //                 left: mX,
                    //                 top: mY
                    //             })
                    //             $("#bigImg").css({
                    //                 left: mX * -oScoreX,
                    //                 top: mY * -oScoreY
                    //             })
                    //         })
                    //     })
                    // },
                    _tabChange() {
                        $(this).find("ul>li").on("click", function () {
                            let $index = $(this).index();
                            $(this).parents(".c3-nav").find("ol").children().eq($index)
                                .addClass("selected").siblings().removeClass("selected");
                        })
                    }
                })
            })()
            $(function () {
                // $(".magnifier>#box")._magnifier()
                $(".c3-nav")._tabChange()
            })

            $("#exzoom").exzoom({
                autoPlay: false,
            }); //方法调用，务必在加载完后执行
        })
    </script>
</body>

</html>
<!-- <div class="magnifier">
  
    <div id="box">
      
        <div id="middleImg">
            <img src="./images/list/img1.jpg" />
            <div id="middleArea"></div>
        </div>
      
        <div id="small">
            <ul>
                <li><img src="./images/list/img1.jpg" /></li>
                <li><img src="./images/list/img1.jpg" /></li>
            </ul>
        </div>
     
        <div id="bigArea">
            <img id="bigImg" src="./images/list/img1.jpg" />
        </div>
    </div>
    
</div> -->